<template>
    <div class="list">
    	<div class="header-box">
    		<form action="/">
		        <van-search v-model="searchParams.keyword" placeholder="请输入商品名称" show-action @search="handleSearch" background="#fff">
		            <img class="list-type" src="~assets/img/goods/list-block.png" alt="" slot="action" @click="listStyle = 'row'" v-if="listStyle == 'block'">
		            <img class="list-type" src="~assets/img/goods/list-row.png" alt="" slot="action" @click="listStyle = 'block'" v-else>
		        </van-search>
	        </form>
	        <van-row class="serach-filter-box van-hairline--top-bottom"> 
	            <van-col @click.native="handleChangeSearchType(item)" v-for="(item, index) in searchType" :key="item.key" span="6" :class="[index !== searchType.length - 1 ? 'van-hairline--right': '', item.active ? 'active' : '']">
	                <span>{{ item.name }}</span>
	                <i v-if="item.sortType" class="arrow-block" :class="[item.sortType ? item.sortType : '', item.only ? 'only' : '']">
	                    <!-- <div class="tooltip" v-if="index == searchType.length - 1" v-show="showCategorySelect">
	                        <div class="triangle">
	                            <span></span>
	                        </div>
	                        <ul>
	                            <li class="van-hairline--bottom" :class="searchParams.categoryId == 0 ? 'active' : ''" @click.stop="handleSwitchCate($event, 0)">全部</li>
	                            <li class="van-hairline--bottom" v-for='cate in goodsCate' :key="cate.id" :class="searchParams.categoryId == cate.id ? 'active' : ''" @click.stop="handleSwitchCate($event, cate.id)">{{ cate.name }}</li>
	                        </ul>
	                    </div> -->
	                </i>
	            </van-col>

                <van-popup v-model="showCategorySelect" position="right" @click-overlay="clickOverlay">
                    <ul class="filtrate" v-for="(cate,index) in goodsCate" :key="index">
                        <li>{{ cate.typeName }}</li>
                        <van-row class="filtrate-subList" gutter="10">
                            <van-col class="filtrate-sub" :class=" sub.active ? 'subActive' : ''" v-for="(sub,no) in cate.typeData" :key="no" span="8" @click.native="handleSwitchCate($event,no,index,sub)">
                              <span class="filtrate-sub--info">{{ sub.name }}</span>
                            </van-col>
                        </van-row>
                    </ul>
                    <van-row class="filtrate-buttom">
                        <van-col span="12" class="filtrate-reset" @click.native="filtrateReset">重置</van-col>
                        <van-col span="12" class="filtrate-confirm" @click.native="filtrateComplete">确定</van-col>
                    </van-row>
                </van-popup>
	        </van-row>
    	</div>
        <van-list v-model="loading" :finished="isLoadFinished" @load="getData" :offset="getListMoreOffset">
            <van-row class="list-wrapper" :style="{padding: listStyle == 'row' ? '5px' : '2.5px'}">
                <van-col :span="listStyle == 'row' ? 24 : 12" v-for="(item, index) in listData" :key="'row' + index" @click.native="$router.push({ name: 'goodsDetail', query: { id: item.id }})" :class="index !== listData.length - 1 && listStyle == 'block' ? 'van-hairline--bottom' : ''">
                    <list-item :showRow="listStyle == 'row'" :imgUrl="item.goodsCoverImg" :title="item.name" :desc="item.title" :price="item.auditPrice | formatPrice" :count="item.salesVolume" />
                </van-col>
            </van-row>
            <!--<errorTips v-show="isLoadException" error-message="请求异常"></errorTips>-->
        </van-list>
        <van-row v-if="!loading && listData.length == 0" class="list-empty">
		    <van-col span="24">
		  	    <img style="width: 128px;" src="~assets/img/goods/list-empty.png" />
		  	    <p class="tips">商品正在火速上架中</p>
		    </van-col>
		</van-row>
        <back-top></back-top>
    </div>
</template>

<script>
import ListItem from "@/components/list-item";
import errorTips from "@/components/error-tips";
import BackTop from "@/components/back-top";
import { getGoodsList, getFiltrateList } from "@/api/goods/index.js";

export default {
  name: "List",
  components: {
    ListItem,
    errorTips,
    BackTop
  },
  data() {
    return {
      searchType: [
        { key: "default", name: "综合", active: true },
        { key: "saleNum", name: "销量", active: false },
        { key: "price", name: "价格", active: false, sortType: "up" },
        {
          key: "category",
          name: "筛选",
          active: false,
          sortType: "down",
          only: true
        }
      ],
      searchParams: {
        categoryId: 0,
        frequencyId: 0,
        goodsLevelId: 0,
        goodsPowerId: 0,
        sort: "",
        keyword: "",
      },
      listStyle: "row",
      loading: false,
      isLoadFinished: false,
      isLoadException: false,
      listData: [],
      goodsCate: [],
      page: 1,
      pageCount: 1,
      getListMoreOffset: 300,
      showCategorySelect: false,
      closeOn: true
    };
  },
  methods: {
    getData() {
      this.loading = true;
      this.isLoadException = false;
      getGoodsList(
        this.searchParams.categoryId,
        this.searchParams.frequencyId,
        this.searchParams.goodsLevelId,
        this.searchParams.goodsPowerId,
        this.page,
        this.searchParams.sort,
        this.searchParams.keyword
      )
        .then(res => {
          this.loading = false;
          this.listData = this.listData.concat(res.data.goodsList);
          this.pageCount = res.data.pageCount;
          if (this.page >= this.pageCount) {
            this.isLoadFinished = true;
          } else {
            this.page++;
          }
        })
        .catch(() => {
          this.loading = false;
          this.isLoadFinished = true;
          this.isLoadException = true;
        });
    },
    getFiltrateList() {
      getFiltrateList().then((rst)=>{
        this.goodsCate = rst.data
      }).catch(()=>{

      })
    },
    handleSearch() {
      this.listData = [];
      this.isLoadFinished = false;
      this.getData();
    },
    handleChangeSearchType(searchType) {
      if (searchType.active && searchType.sortType) {
        searchType.sortType = searchType.sortType === "up" ? "down" : "up";
      } else {
        this.searchType.forEach(item => {
          item.active = false;
        });
        searchType.active = true;
        if (searchType.sortType) {
          if (searchType.only) {
            searchType.sortType = searchType.sortType === "up" ? "down" : "up";
          } else {
            searchType.sortType = "up";
          }
        }
      }
      this.searchParams.sort = "";
      if (searchType.key == "default") {
      } else if (searchType.key == "saleNum") {
        this.searchParams.sort = "saleNum";
      } else if (searchType.key == "price") {
        if (searchType.sortType == "up") {
          this.searchParams.sort = "priceAsc";
        } else {
          this.searchParams.sort = "priceDesc";
        }
      }
      if (searchType.key == "category") {
        this.showCategorySelect = true;
      } else {
        this.showCategorySelect = false;
        this.listData = [];
        this.isLoadFinished = false;
        this.getData();
      }
    },
    handleSwitchCate(event, no, index, sub) {
      this.goodsCate[index].typeData = this.goodsCate[index].typeData.map((el,index)=>{
        el.active = no === index ? !el.active : false
        return el
      })
      
      if (index == 0) {
        if(sub.active){
          this.searchParams.categoryId = sub.id;
        }else{
          this.searchParams.categoryId = 0;
        }
      } else if (index == 1) {
        if(sub.active){
          this.searchParams.frequencyId = sub.id;
        }else{
           this.searchParams.frequencyId = 0;
        }
      } else if (index == 2) {
        if(sub.active){
          this.searchParams.goodsLevelId = sub.id;
        }else{
          this.searchParams.goodsLevelId = 0;
        }
      } else {
        if(sub.active){
          this.searchParams.goodsPowerId = sub.id;
        }else{
          this.searchParams.goodsPowerId = 0;
        }
      }
    },
    clickOverlay() {
      this.showCategorySelect = false;
    },
    filtrateReset() {
      this.searchParams.categoryId = 0 ;
      this.searchParams.frequencyId = 0 ;
      this.searchParams.goodsLevelId = 0 ;
      this.searchParams.goodsPowerId = 0 ;

      for(let i in this.goodsCate){
        for(let n in this.goodsCate[i].typeData){
          this.$set(this.goodsCate[i].typeData[n],'active',false);
        }
      }
    },
    filtrateComplete() {
      this.showCategorySelect = false;
      this.listData = []
      this.isLoadFinished = false
      this.getData()
    }
  },
  created() {
    this.getFiltrateList()
    //this.getData()
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/color.scss";
@import "../../styles/mixin.scss";

.header-box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999 !important;
  width: 100%;
}
.van-list {
  padding-top: 90px;
}
.list-type {
  width: 22px;
  padding: 0 12px;
  vertical-align: middle;
  cursor: pointer;
}

.serach-filter-box {
  height: 24px;
  line-height: 24px;
  padding: 10px 0px;
  background-color: #fff;
  position: relative;
  border-bottom: 1px solid #fefefe;
  .van-col.active {
    color: $activeColor;
    i.arrow-block {
      &.up::before {
        border-bottom-color: $activeColor;
      }
      &.down::after {
        border-top-color: $activeColor;
      }
      &.down .tooltip {
        display: block;
      }
    }
  }
  .van-col {
    span {
      vertical-align: middle;
      display: inline-block;
    }
    i.arrow-block {
      vertical-align: middle;
      display: inline-block;
      height: 0;
      width: 8px;
      background-color: transparent;
      position: relative;
      &::before {
        @include arrow;
        @include arrow-up;
        content: "";
        top: -4px;
        position: absolute;
      }
      &::after {
        @include arrow;
        @include arrow-down;
        content: "";
        bottom: -4px;
        position: absolute;
      }
      &.only.up::after {
        display: none;
      }
      &.only.up::before {
        top: -2px;
      }
      &.only.down::before {
        display: none;
      }
      &.only.down::after {
        top: -2px;
      }
    }
  }
  .van-popup--right {
    width: 80%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 50px;
  }
  .filtrate {
    // margin-bottom: 15px;
    background-color: #ffffff;
    .filtrate-subList {
      margin: 0 !important;
      padding: 0 10px;
    }
    li {
      text-align: left;
      line-height: 25px;
      padding: 10px;
      color: #000;
      font-size: 0.32rem;
      font-weight: 700;
    }
    .filtrate-sub {
      color: $titleColor;
      margin-bottom: 10px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      // margin-right: 10px;
    }
    .filtrate-sub--info {
      display: block;
      padding: 0 5px;
      background-color: #f5f5f5;
      border-radius: 30px;
    }
    .van-col {
      background-clip: content-box;
    }
    .subActive {
      .filtrate-sub--info {
        color: $titleColor;
        border: 1px solid #f44;
        background-color: #fef4f3;
      }
    }
  }
}

/* 气泡 */
.triangle {
  width: 0;
  height: 0;
  border-width: 0 6px 6px;
  border-style: solid;
  border-color: transparent transparent #f5f5f5;
  margin-top: -6px;
  margin-left: 80px;
  position: relative;
}
.triangle span {
  display: block;
  width: 0;
  height: 0;
  border-width: 0 5px 5px;
  border-style: solid;
  border-color: transparent transparent #fff;
  position: absolute;
  top: 1px;
  left: -5px;
}
.tooltip {
  z-index: 99;
  width: 100px;
  border: solid #f5f5f5 1px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  right: -15px;
  top: 10px;
  ul {
    padding: 0 10px;
    li {
      padding: 10px;
      line-height: 20px;
      text-align: center;
      font-style: normal;
      font-weight: 200;
      color: #000;
    }
    .active {
      color: $activeColor;
    }
  }
}

/* 列表 */
.list-wrapper {
  background-color: #f5f5f5;
  overflow: hidden;
  .row {
    border-bottom: 1px solid #f5f5f5;
  }
}
.list-empty {
  padding-top: 50px;
  .tips {
    color: #666;
    padding-top: 10px;
  }
}
[class*="van-hairline"]::after {
  /*border-bottom: none;*/
}
.van-hairline--bottom::after {
  border: none;
}

.card-desc {
  height: 18px;
}

.filtrate-buttom {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  line-height: 50px;
  font-size: 0.32rem;
  .filtrate-reset {
    color: $titleColor;
    border-top: 1px solid #f5f5f5;
  }
  .filtrate-confirm {
    color: #ffffff;
    background-color: $bottomButtonColor;
  }
}
</style>

<style lang="scss">
@import "../../styles/color.scss";
.van-dialog .van-button {
  /*color: $checkBoxColor;*/
}
</style>